iT邦幫忙

4

[JavaScript]認識 async/await

  • 分享至 

  • xImage
  •  

前言

async/await是ES7的寫法,可以讓非同步call back寫法看起來像同步的順序去執行。

async表達式

async function myFunction(){
    return 'done';
};
myFunction();

我們可以發現在JavaScript的function除了可以返回"值",還可以返回"Promise"並且把值(PromiseValue)包進Promise裡面了,有學過Promise的人有發現以下的Promise表達式與async有87分像嗎?!

Promise 表達式

以下我們new一個Promise的class並return給一個function

const myFunction = function(){
    return new Promise(function(resolve, reject){
        return resolve('done');
    })
};
myFunction()

沒錯,async寫法簡化了要先new Promise的步驟,至於為什麼PromiseValue的值是"undefine"。那是因為Promise的PromiseStatus有分三種狀態:預設是pending然後再改變成resolve或是reject。

Promise必須以.then()去invoke後,等狀態(PromiseStatus)變成"resolv"才會接收到值(promiseValue)。

然而因為async的function已經是回傳Promise了,所以竟然也可以用.then()去invoke,我們來看結合.then表達式:

async function myFunction(){
    return 'done';
};
myFunction().then(function(result){
    console.log(result)
});

但要記得.then(這裡要放一個call back function才能看到值),只是很奇怪地隨然有看到值,但是PromiseValue卻是undefine??(希望有人能解惑XD)。

我會問,那為什麼then裡面要放call back function?

由Call Back表達式來解釋原因

function promise(resolve) {
    resolve(5);
}

promise(result => {
    console.log(result)
})

有注意到上面長得很像Promise嗎?比對起來,原來Promise的resolve是function的名稱,Promise所運行的結果會傳進result參數,然後參數就被console.log給印出來。

那Promise可以跟await組合技嗎?

既然async function會返回一個Promise,所以當然可以!
await這行會讓Promise停下來,並等執行完後,才會賦值給等號左邊或是往下繼續執行。所以下面程式碼結果會是先出現"ok",等待1秒後才出現"done!"

async function a(){
    await wait(1000)
    console.log('done!')
}

async function wait(ms) {
    console.log('ok')
    return new Promise(resolve => {
      setTimeout(resolve, ms);
    });
}
a()
//執行結果:
ok
done!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
lkjmn1234
iT邦新手 5 級 ‧ 2020-07-14 13:58:00

async function myFunction(){
return 'done';
};
myFunction().then(function(result){
console.log(result)
});

回undefine因為
myFunction().then(function(result){
console.log(result)
});
是回一個promise
你是要call myFunction()

zen1984 iT邦新手 5 級 ‧ 2020-07-15 08:07:18 檢舉

搜嘎~原來如此,謝謝你仔細看我的文章

lkjmn1234 iT邦新手 5 級 ‧ 2020-07-15 12:17:44 檢舉

寫得很好 很詳細

我要留言

立即登入留言